<template>
    <div class="article-main">
      <div class="lists-top">
        <img :src="details.url" alt>
      </div>
      <div class="author-msg">
        <div class="author-img">
          <img src="@/assets/img/rz-tx001.jpg">
        </div>
        <p class="author-name">{{details.writer}}</p>
        <button class="concern">关注</button>
      </div>
      <h3>{{details.title}}</h3>
      <div class="author-msg pinglun-msg">
        <p class="praise-num">
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-icon-test"></use>
            </svg>
          </span>
          <i>{{details.commentCount}}</i>
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-zan01"></use>
            </svg>
          </span>
          <i>{{details.reviewCount}}</i>
          <span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-pinglun"></use>
            </svg>
          </span>
          <i>{{details.noteCount}}</i>
        </p>
      </div>
      <p class="article-content" v-html="details.abstract"></p>
      <div class="message-box">
        <h4>{{listTotal}}条评论</h4>
        <ul>
          <li v-for="(items,index) in messageLists" :key="index">
            <div class="writer-box">
              <div class="face-img">
                <img src="@/assets/img/rz-tx001.jpg">
              </div>
              <div class="writer-msg flex-box">
                <p class="writer-name">{{items.message_nickname}}</p>
                <p class="write-time">{{items.message_post_time}}</p>
              </div>
              <div class="clap-box">
                <span @click="dianzhanClick(items.id,index)"><svg class="icon" aria-hidden="true">
                  <use v-if="dianzhanShow.indexOf(items.id)>=0" xlink:href="#icon-diary-dianzan1"></use>
                  <use v-else xlink:href="#icon-diary-dianzan"></use>
                </svg>
                </span>
                {{items.message_like}}
              </div>
            </div>
            <div class="msg-box" v-html="items.message_content"></div>
            <ul class="msg-sec">
              <li v-for="item in items.child" :key="item.id">
                <div class="writer-box">
                  <div class="face-img">
                    <img src="@/assets/img/rz-tx001.jpg">
                  </div>
                  <div class="writer-msg flex-box">
                    <p class="writer-name">{{item.message_nickname}}</p>
                    <p class="write-time">{{item.message_post_time}}</p>
                  </div>
                  <div class="clap-box">
                    <span><svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-diary-dianzan"></use>
                    </svg></span>
                    {{item.message_like}}
                  </div>
                </div>
                <div class="msg-box" v-html="item.message_content"></div>
              </li>
            </ul>
          </li>
        </ul>
        <h5 v-if="listTotal" @click="viewMore">{{viewMoremessage}}</h5>
      </div>
      <remarkFooter v-on:reviewMessage="reviewMessage"></remarkFooter>
    </div>
</template>

<script>
// @ is an alias to /src
import remarkFooter from '@/components/index/remark-footer'
export default {
  name: 'articlePage',
  data() {
    return {
      details: '',
      messageLists: '',
      listTotal: '',
      pageSize: 1,
      dianzhanShow: [],
      dianzhanAfter: '',
      viewMoremessage: '查看更多回复',
      replay: {
        message_nickname: '',
        message_content: '',
        article_id: '',
        message_uuid: '',
        message_headimg: ''
      }
    }
  },
  components: {
    remarkFooter
  },
  computed: {},
  methods: {
    dianzhanClick(a, index) {
      if (this.$store.state.isLogin === 0) {
        this.$router.push('/logPage')
      } else {
        let idIndex = this.dianzhanShow.indexOf(a)
        let val = this.$store.state.userInfo
        if (idIndex >= 0) {
          // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
          this.$axios
            .get('/api/?&service=App.Table.ChangeNumber', {
              params: {
                model_name: 'okayapi_message',
                id: a,
                change_field: 'message_like',
                change_value: -1,
                app_key: this.$APPKEY.app_key
              }
            })
            .then(data => {
              console.log(data)
              this.dianzhanShow.splice(idIndex, 1)
              this.messageLists[index].message_like = data.data.data.after_value
              this.userPriseMsg(val, JSON.stringify(this.dianzhanShow))
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          // 选中该checkbox
          this.$axios
            .get('/api/?&service=App.Table.ChangeNumber', {
              params: {
                model_name: 'okayapi_message',
                id: a,
                change_field: 'message_like',
                change_value: 1,
                app_key: this.$APPKEY.app_key
              }
            })
            .then(data => {
              console.log(data)
              this.dianzhanShow.push(a)
              this.messageLists[index].message_like = data.data.data.after_value
              this.userPriseMsg(val, JSON.stringify(this.dianzhanShow))
            })
            .catch(err => {
              console.log(err)
            })
        }
      }
    },
    getMessageData(pageNum, pageSize) {
      let articleId = this.$route.params.articleDetail,
        appSign = [
          this.$APPKEY.app_key,
          articleId,
          'message_like,message_uuid',
          2,
          pageNum,
          pageSize,
          'App.Market_Message.Show',
          this.$APPKEY.app_secret
        ],
        appSignMd5 = this.$md5(appSign.join('')).toUpperCase()
      this.$axios
        .get('/api/?service=App.Market_Message.Show', {
          params: {
            message_key: articleId,
            order: 2, //按评论时间逆序排列
            page: pageNum,
            perpage: pageSize,
            more_select: 'message_like,message_uuid',
            app_key: this.$APPKEY.app_key,
            sign: appSignMd5
          }
        })
        .then(data => {
          console.log(data)
          this.messageLists = data.data.data.items
          this.listTotal = data.data.data.total
        })
        .catch(err => {
          console.log(err)
        })
    },
    userMessage(val) {
      this.$axios
        .get('/api/?s=App.User_Meta.Get', {
          params: {
            uuid: val.uuid,
            token: val.token,
            key: 'articleReply_like',
            app_key: this.$APPKEY.app_key
          }
        })
        .then(data => {
          // console.log(data)
          this.dianzhanShow = JSON.parse(data.data.data.data.msg_like).map(Number) // 将对象字符串转数字
          // console.log(this.dianzhanShow)
        })
        .catch(err => {
          console.log(err)
        })
    },
    userPriseMsg(val, datas) {
      this.$axios
        .get('/api/?s=App.User_Meta.Update', {
          params: {
            uuid: val.uuid,
            token: val.token,
            key: 'articleReply_like',
            data: JSON.stringify({ msg_like: datas }),
            app_key: this.$APPKEY.app_key
          }
          // paramsSerializer: function(params) {
          //   return qs.stringify(params, { arrayFormat: 'brackets' })
          // }
        })
        .then(data => {
          console.log(data)
        })
        .catch(err => {
          console.log(err)
        })
    },
    reviewMessage() {
      this.getMessageData(1, 10)
      this.pageSize = 1
      this.viewMoremessage = '查看更多回复'
    },
    viewMore() {
      this.pageSize++
      if (this.pageSize * 4 > this.listTotal + 4) {
        this.viewMoremessage = '没有更多回复了'
        return false
      } else {
        this.getMessageData(1, 4 * this.pageSize)
      }
      // console.log(this.pageSize);
    }
  },
  created() {
    // 监测app store变化
    // this.$store.watch(
    //   // 当返回结果改变...
    //   function(state) {
    //     return state.userInfo
    //   },
    //   val => {
    //     // console.log(val)
    //     this.userMessage(val)
    //     // 执行回调函数
    //   }
    // )
  },
  mounted() {
    let valuserInfo = this.$store.state.userInfo
    this.userMessage(valuserInfo)
    // console.log(this.$route.params)
    // console.log(this.$route);
    this.$axios
      .get('/api/?s=App.Main_Set.GetItem&id=2&app_key=' + this.$APPKEY.app_key)
      .then(data => {
        // console.log(data);
        // this.details = data.data.data.data
        let lists = data.data.data.data
        // console.log(lists);
        for (let i = 0; i < lists.length; i++) {
          if (lists[i].id === this.$route.params.articleDetail) {
            this.details = lists[i]
          }
          // console.log(lists[i]);
        }
      })
      .catch(err => {
        self.fetchError = err
      })
    this.getMessageData(1, 10)
  }
}
</script>
<style scoped lang="scss">
.article-main {
  width: 100%;
  height: 100vh;
  padding-bottom: 45px;
  box-sizing: border-box;
  overflow-y: auto;
  background: #fff;
  .lists-top {
    width: 100%;
    padding-bottom: 55%;
    position: relative;
    background: url('~@/assets/img/load-bg.gif') center no-repeat;
    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
  }
  h3 {
    font-size: 18px;
    text-align: left;
    color: #333;
    line-height: 38px;
    padding: 0 14px 0 14px;
  }
  .author-msg {
    width: 100%;
    overflow: hidden;
    color: #999;
    padding: 18px 12px 18px 12px;
    box-sizing: border-box;
    .author-img {
      width: 30px;
      height: 30px;
      display: block;
      border-radius: 100%;
      border: 1px solid #f0f0f0;
      float: left;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .concern {
      float: right;
      background: #1ba1f6;
      color: #fff;
      border-radius: 3px;
      border: none;
      font-size: 12px;
      line-height: 18px;
      padding-left: 12px;
      padding-right: 12px;
      padding-top: 3px;
      padding-bottom: 3px;
    }
    p.author-name {
      display: block;
      font-size: 14px;
      color: #333;
      float: left;
      margin: 11px 0 0 6px;
    }
    p.praise-num {
      display: block;
      float: left;
      font-size: 14px;
      span {
        float: left;
        font-size: 24px;
        display: block;
        color: #666;
      }
      i {
        float: left;
        display: block;
        margin-top: 6px;
        margin-left: 3px;
        margin-right: 12px;
      }
    }
  }
  .pinglun-msg {
    border-bottom: 1px solid #eee;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  p.article-content {
    font-size: 14px;
    color: #666;
    box-sizing: border-box;
    line-height: 21px;
    margin-top: 10px;
    padding: 6px 12px 6px 12px;
    text-align: left;
    text-indent: 21px;
  }
  .message-box {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    border-top: 8px solid #eee;
    padding: 0 12px 0 12px;
    h4 {
      font-size: 14px;
      color: #000;
      line-height: 44px;
    }
    h5 {
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #999;
      line-height: 44px;
    }
    ul {
      display: block;
      width: 100%;
      float: left;
      overflow: hidden;
      li {
        display: block;
        width: 100%;
        float: left;
        border-top: 1px solid #eee;
        .writer-box {
          margin-top: 12px;
          float: left;
          width: 100%;
          .face-img {
            width: 30px;
            height: 30px;
            display: block;
            border-radius: 100%;
            border: 1px solid #f0f0f0;
            float: left;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .writer-msg {
            height: 30px;
            margin-left: 8px;
            float: left;
            flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            p {
              display: block;
              float: left;
              width: 100%;
              &.writer-name {
                margin-top: 2px;
                font-size: 14px;
                line-height: 15px;
                color: #333;
              }
              &.write-time {
                margin-top: 2px;
                font-size: 10px;
                line-height: 11px;
                color: #999;
              }
            }
          }
          .clap-box {
            float: right;
            font-size: 12px;
            span {
              margin-right: 4px;
            }
          }
        }
        .msg-box {
          padding-top: 12px;
          padding-bottom: 12px;
          float: left;
          width: 100%;
          img {
            width: 18px;
          }
        }
      }
    }
    ul.msg-sec {
      padding-left: 24px;
      box-sizing: border-box;
      li {
        .writer-box {
          .face-img {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.article-main {
  .message-box {
    ul li .msg-box {
      font-size: 14px;
      color: #666;
      p {
        font-size: 14px;
        line-height: 18px;
        color: #666;
      }
      img {
        height: 18px;
      }
    }
  }
}
</style>
